<template>
  <div class="updatePass">
    <el-card class="box-card acc-card">
      <el-card class="box-card acc-card">
    <el-form :model="passwordFormData" :rules="passwordFormDataRules" ref="passwordFormData" label-width="140px">
      <el-form-item label="原始密码"  prop="oldPassword">
        <el-input type="password"
                  v-model="passwordFormData.oldPassword"
                  auto-complete="off"
                  placeholder="请输入原始密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码"  prop="newPassword">
        <el-input type="password"
                  v-model="passwordFormData.newPassword"
                  auto-complete="off"
                  placeholder="请输入新密码（6～30个字符，支持字母、数字、符号）"></el-input>
      </el-form-item>
      <el-form-item label="确认密码"  prop="checkNewPassword">
        <el-input type="password"
                  v-model="passwordFormData.checkNewPassword"
                  auto-complete="off"
                  placeholder="请确认新密码"></el-input>
      </el-form-item>
      <el-form-item class="anniu">
        <el-button type="primary"
                   @click.native="addSubmit('passwordFormData')"
                   :loading="passwordLoading">提交</el-button>
      </el-form-item>
    </el-form>
    </el-card >
    </el-card >
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from '@/views/home/SidebarItem.vue'
import Screenfull from '@/components/Screenfull'
import { password } from '@/api/auth/login'
import { getAdminId } from '@/utils/auth'
export default {
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.passwordFormData.checkNewPassword !== '') {
          this.$refs.passwordFormData.validateField('checkNewPassword')
        }
        callback()
      }
    }
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordFormData.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      passwordFormData: {
        oldPassword: '',
        newPassword: '',
        checkNewPassword: '',
      },
      passwordFormDataRules: {
        oldPassword: [
          {
            required: true,
            message: '请输入原始密码',
            trigger: 'blur',
          },
        ],
        newPassword: [
          {
            required: true,
            message: '请输入新密码',
            trigger: 'blur',
          },
          { validator: validatePass, trigger: 'blur' },
        ],
        checkNewPassword: [
          {
            required: true,
            message: '请再次输入密码',
            trigger: 'blur',
          },
          { validator: validatePass2, trigger: 'blur' },
        ],
      },
      passwordLoading: false,
    }
  },
  methods: {
    addSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.passwordLoading = true
          let data = Object.assign({}, this.passwordFormData)
          data.adminId = getAdminId()
          password(data)
            .then((res) => {
              this.passwordLoading = false
              if (res.code) {
                this.$message({
                  message: res.message,
                  type: 'error',
                })
              } else {
                this.$message({
                  message: '修改成功',
                  type: 'success',
                })
                // 刷新表单
                this.$refs['passwordFormData'].resetFields()
                this.passwordFormVisible = false
                this.$store.dispatch('loginOut').then(() => {
                  location.reload() // 为了重新实例化vue-router对象 避免bug
                })
              }
            })
            .catch(() => {
              this.$message({
                type: 'error',
                message: '操作失败',
              })
            })
        }
      })
    },
  },
}
</script>

<style type="text/scss" lang="scss" scoped>
.updatePass {
  width: 1000px !important;
  padding: 20px;
  display: block;
  margin: 0 auto;
  
}
</style>
